<template>
    <div>
        <!-- 遍历表单中的数据 -->
        <div class="boox" v-show="10">
            <el-table :data="tableData"
            border
            style="width: 100%">
                <el-table-column fixed prop="id" label="编号" width="auto">
                </el-table-column>
                <el-table-column prop="name" label="名称" width="auto">
                </el-table-column>
                <el-table-column prop="num" label="数量" width="auto">
                </el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template #default="scope">
                        <el-button @click="delBook(scope.row.name)" type="text" size="small">删除</el-button>
                        <el-button @click="dialog = true"  @mousedown="updBook(scope.row.id,scope.row.name,scope.row.num,)" type="text" size="small">编辑</el-button>
                        <el-button @click="lendBook"   @mousedown="getBook(scope.row.id,scope.row.name)" type="text" size="small">借书</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-drawer
            title="修改"
            :before-close="handleClose"
            v-model="dialog"
            direction="ltr"
            custom-class="demo-drawer"
            ref="drawer"
            >

            <!-- 借书栏 -->
            <div v-if="open">
                <el-dialog
                title="提示"
                width="30%"
                :before-close="handleClose">
                <span></span>
                <!-- eslint-disable-next-line -->
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span>
                </el-dialog>
            </div>
            

            <!-- 修改的侧边框 -->
            <div class="demo-drawer__content">
                <el-form :model="form">
                <el-form-item label="书名" :label-width="formLabelWidth">
                    <el-input v-model="form.name" type="text" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="数量" :label-width="formLabelWidth">
                    <el-input v-model="form.num" type="text" autocomplete="off"></el-input>
                </el-form-item>
                </el-form>
                <div class="demo-drawer__footer">
                <el-button @click="dialog = false">取 消</el-button>
                <el-button type="primary" @click="updataBook(form)" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
                </div>
            </div>
            </el-drawer>
        </div>

        <!-- 分页 -->
        <div class="pos">
            <el-button-group>
                <el-button @click="PageLast" type="primary">﹄<i class="el-icon-arrow-right el-icon--right"></i>上一页</el-button>
                <el-button @click="PageChangeNum(index)" v-for="(pagenum,index,) of mss" :key="index"  type="primary">{{ pagenum }}</el-button>
                <el-button @click="PageNext" type="primary">下一页<i class="el-icon-arrow-right el-icon--right">﹃</i></el-button>
            </el-button-group>
        </div>

    </div>
</template>

<script>
import axios from 'axios'
import mitter from '../utils/event-bus'
import { timePanelSharedProps } from 'element-plus/es/components/time-picker/src/props/shared'
    export default {
        data(){
            return {
                // 展示出来的数据
                tableData : [{
                    
                }],
                table : false,
                // 侧边页面的展示
                dialog : false,
                // 侧边页面的内容
                form : {
                    name : '',
                    num : ''
                },
                // 获取更改时的id
                updateId : '',
                // 全部数据
                realBookData : [],
                // 指定个数的数据
                BookData : [],
                // 一页展示数据的个数
                PageAge : 10,
                // 页数
                PageNum : 1,
                // 内部遍历数少10个
                minusTen : 0,
                // 页数数字，用于遍历
                mss : ['₯'],
                // 用于连个数字的比较
                indexs : [],
                // 保存bookid,用于借书
                bookids : '',
                // 保存bookName,用于借书
                bookNames : '',
                // 保存当前登录的id
                CurrentId : '', 
                // 保存当前用户的名字
                names : ''
            }
        },
        mounted(){
            // 获取数据s
            axios.get('/All').then(
                response => {
                    this.realBookData = response.data
                    for(this.minusTen ; this.minusTen < 10 ; this.minusTen++){
                        this.BookData[this.minusTen] = this.realBookData[this.minusTen]
                    }
                    // 遍历到10了就加到10
                    this.minusTen = 10
                    console.log("数据总数为：" + this.realBookData.length)
                    // 页数
                    this.PageNum = Math.ceil(this.realBookData.length / 10)
                    // 渲染
                    if(this.PageAge == 10){
                        this.tableData = this.BookData
                        console.log("this.PageNum= " + this.PageNum)

                        for(let i=1; i <= this.PageNum; i++){
                            this.mss[i] = i
                            // console.log(this.mss)
                        }
                    }
                },
                error => {
                    console.log('错误信息是:', error.message)
                }
            ),
            // 传递数据
            mitter.on('selectBook',this.selBook)
            
        },
        methods : {
            // 模糊查询数据
            selBook(selBook){
                console.log(selBook)
                this.tableData = selBook
            },
            // 删除当前数据
            delBook(name){
              console.log(name)
              this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    axios.post('/remove', {name : name }).then(
                        response => {
                            console.log("响应：" + response.data)
                        },
                        error => {
                            console.log("错误：" + error.message)
                        })
                    this.$message({
                        type: 'success',
                        message: '删除成功!',
                    })
                    }).catch(() => {
                        this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            },
            //为改数据获取当前id
            updBook(id,name,num){
            //    console.log('获取id' + id)
            //    console.log("获取name: " + name)
            //    console.log("获取num: " + num)
                this.updateId = id
                this.form.name = name
                this.form.num = num
            },
            // 改数据
            updataBook(from){
                this.loading = false;
                this.dialog = false;

                if( from.name == ''  || from.num == '' ){
                    this.$notify.error({
                        title: '错误',
                        message: '操作失败'
                    });
                }else{
                    axios.post('/update', {id : this.updateId , name : from.name, num : from.num }).then(
                    response => {
                        console.log(response.data)
                        
                    },
                    error => {
                        console.log(error.message)
                    })
                    this.$notify({
                    title: '成功',
                    message: '操作成功',
                    type: 'success'
                    }); 
                }
                from.name = '',
                from.num = ''
                    
            },
            // 上一页
            PageLast(){
                console.log('这里为上一页')
                if(this.PageAge <= 10){
                        alert('已经是第一页了')
                        return 
                }else{
                    this.PageAge = this.PageAge -  10
                    this.minusTen = this.minusTen - 20 
                    this.BookData = []
                    for(this.minusTen; this.minusTen < this.PageAge; this.minusTen++){
                        this.BookData[this.minusTen] = this.realBookData[this.minusTen]  
                    }
                    this.tableData = []
                    this.tableData = this.BookData
                }
                

                
                
            },
            // 下一页
            PageNext(){
                console.log('这里为下一页')
                if(this.PageNum == this.PageAge / 10 ){
                    alert('已经是最后一页了')
                    return
                }else{
                    this.PageAge = this.PageAge +  10
                    this.BookData = []
                    for(this.minusTen; this.minusTen < this.PageAge; this.minusTen++){
                        this.BookData[this.minusTen] = this.realBookData[this.minusTen]  
                    }
                    this.tableData = []
                    this.tableData = this.BookData
                }
               
            },

            //通过页数按钮更改页面
            PageChangeNum(index){
                setTimeout(() =>{
                    if(index == '') index = 1 
                this.PageAge = index * 10
                this.minusTen = this.PageAge - 10
                this.BookData = []
                for(this.minusTen; this.minusTen < this.PageAge; this.minusTen++){
                    this.BookData[this.minusTen] = this.realBookData[this.minusTen]  
                }
                this.tableData = []
                this.tableData = this.BookData      
                },10)
                
            },
            //获取借书的book信息
            getBook(bookid,bookname,){
                this.bookids = bookid
                this.bookNames = bookname
            },
            // 借书
            lendBook(){
                // 获取当前用户的id
                axios.get('/getCurrentId').then(
                    response => {
                        console.log(response.data)
                        this.CurrentId = response.data
                       
                        axios.get('/User/id?id=' + this.CurrentId).then(
                            repsonse => {
                                console.log(repsonse.data)
                                this.names = repsonse.data[0].name
                            },
                            error => {
                                console.log(error.message)
                            })
                        

                        if(this.CurrentId != ''){
                            setTimeout(() => {
                                axios.post('/insLend',{id:null, userId:this.CurrentId,userName: this.names, bookId:this.bookids, bookName:this.bookNames, bookNum:1})
                            },100)
                            this.$notify({
                            title: '借书成功',
                            message: '操作成功',
                            type: 'success'
                            }); 
                            
                        }else{
                            alert('您还未登录')
                            return
                        }
                    },
                    error => {
                        console.log(error.message)
                    })
            }
        }
    }
</script>

<style scoped>
    .tab{
        font-size:20px;
    }
    .pos{
        float:right;
        /* width:900px; */
        margin-top:12px;
    }
    .boox{
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
    }
    .topPage{
        width:300px;
        height:300px;
        z-index:auto
    }
    .center{
        text-align: center;
    }
</style>



